<template>
<div>
	<div style="background-color: #ffffff;" v-for="value in list">
		<div class="kuang_k">
			<div><img :src="url + value.image"/></div>
		</div>
		<div style="padding-bottom: 10px;">
			<div class="you_wen">
				<div class="you_wen1">{{value.name}}</div>
			</div>	
			<div class="you_pq">
				<div class="you_pq1" style="font-size: 20px;line-height: 20px;margin-top: 8px;">¥</div>
				<div class="you_pq2">{{value.goods_price}}</div>
				<router-link :to="{path:'/jifenshangpingxiangqinger',query:{goods_id:value.goods_id}}">
					<input type="button" value="去拼抢" class="you_pq4"/>
				</router-link>
				<div class="clearfix"></div>
			</div>
		</div>
		<div style="width: 100%;height: 8px;background: #F5F5F5;"></div>
	</div>
	<div style="width: 100%;height: 50px;"></div>
	<loading :show="show2" :text="text1"></loading>		
</div>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import axios from 'axios'
	export default {
		components: {
			mapState, 
			mapActions
		},
		data() {
			return {
				enjoy:false,
				list:'',
				show2:false,
				text1:'Loading...'
			}
		},
		created(){
			// this.$store.commit("setToken", 'abc');			
			console.log(this.token)
			this.show2 = true;
			var that = this;
			axios.get(that.url+"/home/goods/getGoodsList")
            .then(function(res){
                console.log(res);
                that.list = res.data.goods;
                that.show2 = false;
            })
            .catch(function(err){
                console.log(err);
            })
		},
		methods: {
			enjoying(){
				this.enjoy = true;
			},
			xiaoshi(){
				this.enjoy = false;
			}
		},
		computed:{
            ...mapState({
                token: state => state.Token.userToken()//获取用户Token
            }),
        }
	}
</script>

<style scoped>
img {display: block;}
body{
	position: relative;
}
.kuang_k{
	width: 100%;
	height: 180px;
	
}
.kuang_k img{
	width: 100%;
	height: 180px;
}
.you_wen{
	width: 100%;
	padding: 0px 15px;
	margin-top: 10px;
	
}
.you_wen1{
	line-height: 21px;
	font-size: 15px;
	color:#333333;
}
.you_pq{
	width: 100%;
	padding: 0px 15px;
}
.you_pq1{
	line-height: 12px;
	font-size: 12px;
	float: left;
	color: #FF2E22;
	margin-top: 15px;
}

.you_pq2{
	line-height: 20px;
	font-size: 20px;
	float: left;
	color: #FF2E22;
	margin-left: 6px;
	margin-top: 8px;
}
.you_pq3{
	line-height: 12px;
	font-size: 13px;
	float: left;
	color: #9B9B9B;
	margin-left: 6px;
	margin-top: 13px;
}
.you_pq4{
	float: right;
	background: #00C850;
	color: #FFFFFF;
	border-radius: 4px;
	height: 26px;
	width:70px ;
	margin-top: 5px;
	border: none;
	outline: none;
}
.clearfix{
	float: none;
	clear: both;
}
</style>
